<template>
  <div class="main">
    <SearchHander
      :searchlist="searchlist"
      @getUpDown="getUpDown"
      @getTrademark="getTrademark"
      @getProps="getProps"
    ></SearchHander>
    <SearchBottom></SearchBottom>
    <!-- <el-pagination
      background
      layout="prev, pager, next"
      :total="searchList.goodsList.length"
      @current-change="handleCurrentChange"
    >
    </el-pagination> -->
    <RightNav></RightNav>
  </div>
</template>

<script>
import SearchHander from '../../components/SearchPages/SearchHander.vue'
import SearchBottom from '../../components/SearchPages/SearchBottom.vue'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      searchlist: {
        categoryName: '',
        keyword: '',
        order: '1:desc',
        pageNo: 1,
        pageSize: 10,
        trademark: '',
        props: []
      }
    }
  },
  computed: {
    ...mapState('searchAbout', ['searchList'])
  },
  methods: {
    getProps (val) {
      this.searchlist.props.push(val)
    },
    getsearchkey (val) {
      this.searchlist.keyword = val
    },
    getUpDown (val) {
      this.searchlist.order = `${val[1]}:${val[0]}`
    },
    handleCurrentChange (val) {
      console.log(val)
      this.searchlist.pageNo = val
    },
    // 获取来自searchHander组件的检索项
    getTrademark (val) {
      this.searchlist.trademark = val
    }
  },
  mounted () {
    // 是否展示侧边菜单
    this.$bus.$emit('getShow', false)
    // 获取来自Home主页的搜索关键词
    this.$bus.$on('getSearchKey', this.getsearchkey)
    // 将关键词绑定到发送的数据上
    this.searchlist.keyword = this.$route.query.searchKey
  },
  watch: {
    searchlist: {
      deep: true,
      handler (newval, oldval) {
        this.$store.dispatch('searchAbout/getSearchResult', newval)
      }
    }
  },
  components: {
    SearchHander,
    SearchBottom
  }
}
</script>

<style scoped lang="less">
.el-pagination {
  display: flex;
  justify-content: flex-end;
}
.main {
  width: 1200px;
  margin: 0 auto;
}
</style>
